// 最下面的热门列表，数据根据点赞数量排序要前几

import React from 'react'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import './hot.css'
import { getbuslist, getsplist, getBus } from '../../redux/actionCreator'

class Hot extends React.Component {
    constructor(props) {
        super(props);

        this.props.dispatch(getbuslist())
        this.props.dispatch(getsplist())

    }
    render() {
        return <ul>
            {(this.props.shop.sort((a, b) => Number(b.commodity_appoint) - Number(a.commodity_appoint)).slice(0, 3)).map((item, index) => {
                return (
                    <li
                        key={index} className='hot-li'
                        style={{ borderRadius: '20px', backgroundColor: '#c45606' }}
                        // onClick={()=>{this.props.history.push('/detail')}}

                        onClick={() => {
                            this.props.history.push({
                                pathname: '/detail',
                                // search: `commodity_id=${item.commodity_id}`
                            })
                            // 将商品信息保存在本地方便存取 
                            localStorage.setItem('commoditydetail', JSON.stringify(item))
                            // 将此商品所对应的商家信息存储在本地方便跳转之后输出信息
                            this.props.business.map((item2) => {
                                if (item2.business_id == item.business_id) {
                                    localStorage.setItem('busdetail', JSON.stringify(item2))
                                }
                            })
                        }}
                    >

                        <img className="hot-img" src={`http://www.h5weixin.club:1025/api/image/${item.commodity_pic}`}></img>

                        <span className="hot-word">
                            <div className="hot-word-title">{((getBus(this.props)).filter((item2) => item2.business_id === item.business_id))[0]?.business_name}·{item.commodity_title}</div>

                            <div className="hot-word-msg">
                                <div>
                                    <i className="iconfont icon-yuyue"></i>
                                    <span>{item.commodity_time}</span>
                                </div>
                                <div>
                                    <i className="iconfont icon-didian"></i>
                                    <span>{((getBus(this.props)).filter((item2) => item2.business_id === item.business_id))[0]?.business_address}·{item.commodity_title}</span>
                                    {/* <span>{((this.props.business).filter((item2) => item2.business_id === item.business_id))[0].business_name}</span> */}
                                </div>
                                <div>
                                    <i className="iconfont icon-jinqian"></i>
                                    <span>{item.commodity_money}</span>
                                </div>
                                <div>
                                    <span>
                                        <i className="iconfont icon-yuyue1"></i>
                                        {item.commodity_appoint}
                                    </span>
                                    <span style={{ marginLeft: '10px' }}>
                                        <i className="iconfont icon-xin1"></i>
                                        {item.commodity_collect}
                                    </span>
                                </div>

                            </div>
                        </span>

                    </li>

                )

            })
            }</ul>
    }
}

const mapStateToProps = (state) => (
    {
        shop: state.shop,
        business: state.business
    }
)

export default withRouter(connect(mapStateToProps)(Hot))
